<template>
    <view>
        <u-navbar :safeAreaInsetTop="true" autoBack placeholder>
            <view slot="center" class="xilu_center_slot flex-box" >
                <view class="flex-box city fs30 col10 fwb" @click="bindCityChange()">{{currentCity?currentCity.name:''}}</view>
                <view class="fs24 cola flex-box flex-grow-1 search" @click="search()">{{q?q:'请输入搜索的内容'}}</view>
                <!-- <view class="xilu_search_btn btn1">搜索</view> -->
            </view>
        </u-navbar>
        <view class="flex-box">
            <view class="xilu_classic_list fs32 col89 flex-grow-1">
                <view :class="categoryFirstIndex == -1?'active':''" class="xilu_class_item" @click="changeFirstCategory(-1)">全部</view>
                <view :class="categoryFirstIndex == index?'active':''" class="xilu_class_item" v-for="(item,index) in categoryList" @click="changeFirstCategory(index)">{{item.name}}</view>
            </view>
            <view class="xilu_class_item">
                <view class="fs32 col89 sort" @tap.stop="morePop = !morePop">{{chooseSort}}</view>
                <view class="more_pop" v-if="morePop">
                    <view class="active" v-for="(item,index) in sortList" @click="bindChooseSort(index)">{{item.name}}</view>
                </view>
            </view>
        </view>
        <view class="xilu_top_list">
            <view class="xilu_top_list_item" :class="categorySecondIndex == -1?'active':''" @click="changeSecondCategory(-1)">全部</view>
            <view class="xilu_top_list_item" v-for="(item,index) in categorySecondList" :class="categorySecondIndex == index?'active':''" @click="changeSecondCategory(index)">{{item.name}}</view>
        </view>
        <view class="box">
            <mescroll-uni ref="mescrollRef" :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback">
                <view class="pt30">
                    <goodslist :list="list"></goodslist>
                </view>
            </mescroll-uni>
        </view>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import goodslist from "@/components/goodslist/goodslist.vue";
	const app = getApp();
    export default {
        mixins: [MescrollMixin], // 使用mixin
        components: {
            goodslist
        },
        data() {
            return {
				currentCity: null,
				sortList:[{id:1,name:'最新发布'},{id:2,name:'距离最近'}],
				chooseSort:"排序",
                categoryList: [],
                categoryFirstIndex: -1,
                categorySecondList: [],
                categorySecondIndex: -1,
                query: {
					lat:'31.235929042252',
					lng:'121.48053886018',
                    q: '',
                    category_id: 0,
					sort:0
                },
                categoryId: 0,
                list: [],
                morePop:false,
            };
        },
        onLoad(options) {
            this.query.category_id = options.category_id || 0;
            this.query.q = options.q || '';
            this.fetchCategoryList();
			
			let page = this;
			this.currentCity = this.$core.getCurrentCity();
			uni.$on(app.globalData.Event.CurrentCityChange2, function(currentCity) {
				page.currentCity = currentCity;
				page.mescroll.resetUpScroll();
			})
			this.$core.getLatLng(function(lat,lng){
				page.query.lat = lat;
				page.query.lng = lng;
			})
        },
		onUnload() {
			uni.$off(app.globalData.Event.CurrentCityChange2);
		},
        methods: {
			//更换城市
			bindCityChange(){
				uni.navigateTo({
				    url: '/pages/change_city/change_city'
				})
			},
			//排序
			bindChooseSort(index){
				this.chooseSort = this.sortList[index].name;
				this.query.sort = this.sortList[index].id;
				this.morePop = false;
				this.mescroll.resetUpScroll();
			},
            //分类
            fetchCategoryList() {
                let categoryId = this.query.category_id;
                this.$core.get({
                    url: 'xilumarket.product_category/lists',
                    data: {},
                    loading: false,
                    success: ret => {
                        if (categoryId) {
                            for (let i = 0; i < ret.data.length; i++) {
                                if (ret.data[i].id == categoryId) {
                                    this.categoryFirstIndex = i;
                                    this.categorySecondList = ret.data[i].childlist;
                                    break;
                                } else {
                                    for (let k = 0; k < ret.data[i].childlist.length; k++) {
                                        if (categoryId == ret.data[i].childlist[k].id) {
                                            this.categoryFirstIndex = i;
                                            this.categorySecondList = ret.data[i].childlist;
                                            this.categorySecondIndex = k;
                                            break;
                                        }
                                    }
                                }
                            }
                        }
                        this.categoryList = ret.data;
                    }
                })
            },
            //切换一级分类
            changeFirstCategory(index) {
                this.categoryFirstIndex = index;
                this.categorySecondList = index >= 0 ? this.categoryList[index].childlist : [];
                this.categorySecondIndex = -1;
                this.query.category_id = index >= 0 ? this.categoryList[index].id : 0;
                this.mescroll.resetUpScroll();
            },
            //切换二级分类
            changeSecondCategory(index) {
                this.categorySecondIndex = index;
                console.log(index)
                this.query.category_id = index >= 0 ? this.categorySecondList[index].id : (this.categoryFirstIndex >= 0 ? this.categoryList[this.categoryFirstIndex].id : 0);
                this.mescroll.resetUpScroll();
            },
            search() {
                uni.navigateTo({
                    url: '/pages/search_result/search_result'
                })
            },
            /*上拉加载的回调*/
            upCallback(page) {
                // 此处可以继续请求其他接口
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                let query = this.query;
                query.page = pageNum;
                query.pagesize = pageSize;
                this.$core.get({
                    url: 'xilumarket.product/lists',
                    loading: false,
                    data: query,
                    success: (ret) => {
                        let data = ret.data;
                        // 接口返回的当前页数据列表 (数组)
                        let curPageData = data.data;
                        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                        let curPageLen = curPageData.length;
                        // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                        let totalPage = data.last_page;
                        // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                        //let totalSize = data.total;
                        // 接口返回的是否有下一页 (true/false)
                        //let hasNext = data.current_page;

                        //设置列表数据
                        if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
                        this.list = this.list.concat(curPageData); //追加新数据

                        // 请求成功,隐藏加载状态
                        //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                        this.mescroll.endByPage(curPageLen, totalPage);


                        setTimeout(() => {
                            this.mescroll.endSuccess(curPageLen)
                        }, 20)
                    },
                    fail: () => {
                        //  请求失败,隐藏加载状态
                        this.mescroll.endErr()
                    }
                })

            },

            downCallback() {
                if (this.mescroll.optUp.use) {
                    this.mescroll.resetUpScroll()
                } else {
                    setTimeout(() => {
                        this.mescroll.endSuccess();
                    }, 500)
                }
            },
            changeList(index) {
                this.classicIndex = index;
            },
            changeTop(index) {
                this.topListIndex = index;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .xilu {
        &_logo {
            width: 80rpx;
            height: 80rpx;
        }

        &_center_slot {
            width: 460rpx;
            height: 75rpx;
            background: #FFFFFF;
            border-radius: 40rpx;
            border: 2rpx solid #555555;
            margin-left: 96rpx;
            padding: 0 12rpx 0 20rpx;
        }

        &_bg {
            width: 750rpx;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2;
        }

        &_bg_block {
            width: 750rpx;
            height: calc(486rpx - 44px - var(--status-bar-height));
            background: linear-gradient(180deg, #F9C022 0%, rgba(255, 193, 0, 0) 100%);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2;
        }

        &_search_btn {
            width: 100rpx;
            height: 56rpx;
            font-size: 24rpx;
            line-height: 56rpx;
        }

        &_classic_list {
            width: 100%;
            height: 90rpx;
            line-height: 90rpx;
            overflow-x: scroll;
            white-space: nowrap;
            position: relative;

            &::-webkit-scrollbar {
                display: none;
            }
        }

        &_class_item {
            display: inline-block;
            margin-left: 50rpx;
            position: relative;

            &.active {
                font-size: 32rpx;
                color: #101010;

                &::after {
                    display: block;
                    content: "";
                    width: 31rpx;
                    height: 13rpx;
                    background: url(@/static/icon/index_active.png) no-repeat center;
                    background-size: 100%;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    margin: auto;
                }
            }

            &:first-child {
                margin-left: 30rpx;
            }

            &:last-child {
                margin-right: 30rpx;
            }
            
            .more_pop{
                background: #FFFFFF;
                box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183,189,202,0.3);
                border-radius: 15rpx;
                position: absolute;
                top: 70rpx;
                right: 0;
                width: 200rpx;
                height: 140rpx;
                line-height: 70rpx;
                text-align: center;
                z-index: 10;
            }
            .sort{
                display: flex;
                align-items: center;
            }
            .sort::before{
                content: "";
                display: block;
                width: 24rpx;
                height: 24rpx;
                background: url("/static/icon/sort.png") no-repeat center;
                background-size: 100%;
                margin-right: 6rpx;
            }
            .sort::after{
                content: "";
                display: block;
                width: 100rpx;
                height: 90rpx;
                background: linear-gradient(to right,rgba(0,0,0,0),rgba(255,255,255,1),rgba(255,255,255,1));
                position: absolute;
                left: -124rpx;
                top: 0;
                bottom: 0;
            }
        }

        &_top_list {
            height: 120rpx;
            width: 100%;
            height: 90rpx;
            padding-top: 20rpx;
            overflow-x: scroll;
            white-space: nowrap;

            &_item {
                display: inline-block;
                height: 60rpx;
                background: #FFFFFF;
                border-radius: 30rpx;
                border: 1rpx solid #EEEEEE;
                padding: 0 20rpx;
                font-size: 30rpx;
                font-weight: 400;
                color: #898989;
                line-height: 58rpx;
                margin-left: 20rpx;

                &:last-child {
                    margin-right: 30rpx;
                }
            }

            &_item.active {
                background-color: #FFC100;
                border-color: #FFC100;
                color: #333333;
            }

        }
    }

    .box {
        height: calc(100vh - 44px - var(--status-bar-height) - 120rpx - 90rpx);
    }

    .search {
        border-left: 1rpx solid #EEEEEE;
        padding-left: 10rpx;
        margin-left: 16rpx;
        &::before{
            content: "";
            display: block;
            width: 34rpx;
            height: 34rpx;
            background: url("/static/icon/search.png") no-repeat center;
            background-size: 100%;
        }
    }

    .city::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-width: 10rpx 10rpx 0;
        border-style: solid;
        border-color: #000 transparent transparent;
        margin-left: 10rpx;
    }
</style>